<template>
  <div id="nenhao" :style="{ width: '100%', height: '420px', backgroundColor: '#fff' }"></div>
</template>
<script>
// https://www.makeapie.com/editor.html?c=x3plwvJlaT
import echarts from 'echarts'
var echartData = {}
export default {
  data() {
    return {}
  },
  props: ['pieData_sx'],
  watch: {
    pieData_sx: {
      // 正确给 cData 赋值的 方法
      deep: true,
      handler(newVal, oldVal) {
        echartData = newVal
      },
    },
  },
  mounted() {
    echartData = this.pieData_sx
    const arrName = this.getArrayValue(echartData, 'name')
    const arrValue = this.getArrayValue(echartData, 'value')
    let numss = 0
    arrValue.forEach((item) => {
      numss += item
    })
    const sumValue = numss
    const objData = this.array2obj(echartData, 'name')
    const optionData = this.getData(echartData, sumValue)
    var myChart = echarts.init(document.getElementById('nenhao'))
    const option4 = {
      title: [
        {
          text: '全网可计量能耗设备占比',
          top: 15,
          left: '3%',
          subtextStyle: {
            fontSize: 28,
          },
          textStyle: {
            fontSize: 14,
            color: '#2F3033',
          },
        },
      ],
      legend: {
        show: true,
        icon: 'circle',
        orient: 'vertical',
        // top: 'center',
        left: '38%',
        bottom: 20,
        data: arrName,
        width: 50,
        padding: [0, 5],
        // itemGap: 25,
        formatter: function (name) {
          return name + '{value|' + objData[name].value + '}'
        },
        textStyle: {
          rich: {
            // title: {
            //   fontSize: 12,
            //   color: '#333'
            // },
            value: {
              padding: [0, 0, 0, 10],
              fontSize: 12,
              color: '#333',
            },
          },
        },
      },
      tooltip: {
        show: true,
        trigger: 'item',
        formatter: '{a}<br>{b}:{c}({d}%)',
      },
      color: ['#1F90FF', '#34C25B', '#FF9900'],
      grid: {
        top: '20%',
        bottom: '63%', // 两个圆环设置
        // bottom: '55%', // 三个圆环设置
        left: '50%',
        containLabel: false,
      },
      yAxis: [
        {
          type: 'category',
          inverse: true,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            inside: true,
            textStyle: {
              // color: '#333',
              // fontSize: 16
              rich: {
                0: {
                  color: '#333',
                  fontSize: 12,
                },
                1: {
                  padding: [0, 0, 0, 0],
                  color: '#333',
                  fontSize: 12,
                },
              },
            },
            show: true,
            formatter: function (name) {
              for (let i = 0; i < optionData.yAxis.length; i++) {
                if (name === optionData.yAxis[i]) {
                  return '{' + i + '|' + optionData.yAxis[i] + '}'
                }
              }
              // return '{v0|' + optionData.yAxis[0] + '}'
            },
          },
          data: optionData.yAxis,
        },
      ],
      xAxis: [
        {
          show: false,
        },
      ],
      series: optionData.series,
    }
    myChart.setOption(option4)
    window.addEventListener('resize', function () {
      //   让我们图表调用resize方法
      myChart.resize()
    })
  },
  methods: {
    getArrayValue(array, key) {
      if (key) {
        var keys = key || 'value'
        var res = []
        if (array) {
          array.forEach(function (t) {
            res.push(t[keys])
          })
        }
        return res
      }
    },
    array2obj(array, key) {
      var resObj = {}
      for (var i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i]
      }
      return resObj
    },
    getData(data, sumValue) {
      var res = {
        series: [],
        yAxis: [],
      }
      for (let i = 0; i < data.length; i++) {
        res.series.push({
          name: '',
          type: 'pie',
          clockWise: false, // 顺时加载
          hoverAnimation: false, // 鼠标移入变大
          radius: [52 - i * 15 + '%', 45 - i * 15 + '%'],
          center: ['50%', '50%'],
          label: {
            show: false,
          },
          itemStyle: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            borderWidth: 5,
          },
          data: [
            {
              value: data[i].value,
              name: data[i].name,
            },
            {
              value: sumValue - data[i].value,
              name: '',
              itemStyle: {
                color: 'rgba(0,0,0,0)',
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              hoverAnimation: false,
            },
          ],
        })
        res.series.push({
          name: '',
          type: 'pie',
          silent: true,
          z: 1,
          clockWise: false, // 顺时加载
          hoverAnimation: false, // 鼠标移入变大
          radius: [52 - i * 15 + '%', 45 - i * 15 + '%'],
          center: ['50%', '50%'],
          label: {
            show: false,
          },
          itemStyle: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            borderWidth: 5,
          },
          data: [
            {
              value: 7.5,
              itemStyle: {
                color: '#E3F0FF',
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              hoverAnimation: false,
            },
            {
              value: 2.5,
              name: '',
              itemStyle: {
                color: 'rgba(0,0,0,0)',
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              hoverAnimation: false,
            },
          ],
        })
        res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + '%')
      }
      return res
    },
  },
}
</script>
<style lang="scss" scoped></style>
